import {useState,useEffect,forwardRef,useImperativeHandle} from 'react'
import {useLocation,useNavigate,Outlet} from 'react-router-dom'
import axios from 'axios'
import { Flex , Table,Modal} from 'antd';
import type { TableColumnsType } from 'antd';


interface DataType {
    key: React.Key;
    drugcode:String,//药品编码
    name: String,//名称
    size: String,//规格
    package: String,//包装
    chiacode: String,//拼音码
    unit: String,//发药单位
    MSItype: String,//医保类别
    price: Number,//价格
    inventory: Number,//库存
    expiration: Number,//有效期
  }
  
  const columns: TableColumnsType<DataType> = [
    { title: '药品编码', dataIndex: 'drugcode', key: '8',width:'100px',align:'center'},
    { title: '药品名称', dataIndex: 'name', key: '9',width:'100px',align:'center',fixed: 'left',},
    { title: '规格', dataIndex: 'size', key: '11' ,width:'100px',align:'center'},
    { title: '包装', dataIndex: 'package', key: '10',width:'100px',align:'center'},
    { title: '拼音码', dataIndex: 'chiacode', key: '12' ,width:'100px',align:'center'},
    { title: '发药单位', dataIndex: 'unit', key: '13',width:'100px',align:'center' },
    { title: '医保类别', dataIndex: 'MSItype', key: '14' ,width:'100px',align:'center'},
    { title: '零售单价', dataIndex: 'price', key: '15' ,width:'100px',align:'center'},
    { title: '药品库存', dataIndex: 'inventory', key: '16',width:'100px',align:'center'},
    { title: '剩余有效期（天）', dataIndex: 'expiration', key: '17',width:'100px',align:'center' },
    {
      title: '操作',
      key: '18',
      // fixed: 'right',
      width: 100,
      render: () => <a>选择</a>,
      align:'center'
    }
  ];
  
//   const dataSource = Array.from({ length: 100 }).map<DataType>((_, i) => ({
//     key: i,
//     name: `Edward King ${i}`,
//     age: 32,
//     address: `London, Park Lane no. ${i}`,
//   }));



let WestDrug = forwardRef((props,ref) => {

    let [list,setlist] = useState([])
    // let [arr,setarr] = useState([])

    let getlist = async()=>{
        let {data:{lis}} =  await axios.get('http://127.0.0.1:3000/why/windex')
        lis.forEach((item:any, index:any) => {
          item.key = index;
      });
      setlist(lis);
    }

        const [isModalOpen, setIsModalOpen] = useState(false);

        const btnaddrug = () => {
            setIsModalOpen(true);
        };
        useImperativeHandle(ref,()=>({
            btnaddrug
        }))

        
          const handleCancel = () => {
            setIsModalOpen(false);
          };
            // key: i,
            // drugcode:a.drugcode,
            // name: a.name,
            // size: a.size,
            // package: a.package,
            // chiacode: a.chiacode,
            // unit: a.unit,
            // MSItype: a.MSItype,
            // price: a.price,
            // inventory: a.inventory,
            // expiration: a.expiration


    useEffect(()=>{
        getlist()
    },[])

    return (
        <>
            <Modal title="选择药品" footer={null}  open={isModalOpen}  onCancel={handleCancel} width={500} >
                <Table<DataType>
                    size='small'
                    columns={columns}
                    dataSource={list}
                    scroll={{ x: 'max-content', y: 55 * 5 }}
                />
            </Modal>
            {/* <button onClick={()=>{btnadddrug()}}>add</button> */}
        </>
    )
})

export default WestDrug